<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import { timeAgo, formatTimestamp } from '@/utils/index'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import APIDynamic from '@/api/dynamic'
const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()

function submitUnfollow() {
    ElMessageBox.confirm(
        '是否取消关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!$props.trend?.user?.Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDynamic.cancelUserConcern($props.trend.user.Invite_code).then(() => {
            $emit('on-unfollow')
        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}
</script>

<template>
    <div class="item-user">
        <div class="time" v-if="trend.user?.time">{{ timeAgo(formatTimestamp(trend.user?.time)) }}</div>
        <div class="avatar">
            <img v-if="trend.user?.head_img" :src="trend.user?.head_img" alt="头像">
        </div>
        <div class="name">{{ trend.user?.username }}</div>
        <button class="btn" @click="submitUnfollow">已关注</button>
    </div>
</template>

<style lang="scss" scoped>
.item-user {
    width: 100%;
    transition: all .2s;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 10px 0;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    &:hover {
        background-color: #F6F6F6;
    }

    .btn {
        width: 83px;
        height: 30px;
        border-radius: 5px;
        font-size: 14px;
        border: none;
        background-color: rgba(238, 238, 239, 1);
        color: #BEBEBE;
        cursor: pointer;
    }

    .name {
        color: rgba(136, 136, 136, 1);
        font-size: 14px;
    }

    .avatar {
        width: 73px;
        height: 73px;
        border-radius: 50%;
        background-color: #dbdbdb;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .time {
        margin-left: 20px;
        color: rgba(56, 148, 255, 1);
        font-size: 14px;
    }
}
</style>
